<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div>
    <div class="abstatic-height"></div>
    <el-container class="unit-all-container">
      <el-container class="unit-left-info">
        <div v-show="unitList.length!=0">
          <title-warp widthAuto :title="'基本情况'">
            <el-row class="nework-info-wrap" v-loading="isloadbaseinfo">
              <div class="basicinfo">
                <span class="buildtitle"></span>
                <span
                  class="buildedit"
                  onselectstart="return false;"
                  v-if="isbasicinfo"
                  v-show="basicInfo.oname!=''"
                  unselectable="on"
                  @click="isbasicinfo=!isbasicinfo"
                >
                  <i class="el-icon-edit"></i>编辑
                </span>
                <span
                  class="buildedit"
                  onselectstart="return false;"
                  v-else
                  unselectable="on"
                  @click="saveBasicInfo('basicForm')"
                >
                  <i class="el-icon-edit-outline"></i>保存
                </span>
              </div>
              <el-form
                :model="basicInfo"
                :rules="basicrules"
                label-position="top"
                ref="basicForm"
                class="demo-basicForm"
              >
                <el-form-item label="单位名称" prop="oname" style="float: left;">
                  <el-input v-model.trim="basicInfo.oname" :disabled="isbasicinfo"></el-input>
                </el-form-item>
                <el-form-item label="信用代码" prop="olicense" style="float: right;">
                  <el-input v-model.trim="basicInfo.olicense" :disabled="isbasicinfo"></el-input>
                </el-form-item>
                <el-form-item label="单位电话" prop="ophone" style="float: left;">
                  <el-input v-model.trim="basicInfo.ophone" :disabled="isbasicinfo"></el-input>
                </el-form-item>
                <el-form-item label="单位地址" prop="oaddress" style="float: right;">
                  <el-input v-model.trim="basicInfo.oaddress" :disabled="isbasicinfo"></el-input>
                </el-form-item>
                <el-form-item label="消防安全责任人姓名" prop="safeDutyName" style="float: left;">
                  <el-input v-model.trim="basicInfo.safeDutyName" :disabled="isbasicinfo"></el-input>
                </el-form-item>
                <el-form-item label="消防安全责任人电话" prop="safeDutyPhone" style="float: right;">
                  <el-input v-model.trim="basicInfo.safeDutyPhone" :disabled="isbasicinfo"></el-input>
                </el-form-item>
                <el-form-item label="消防安全责任人身份证" prop="safeDutyIdcard" style="float: left;">
                  <el-input v-model.trim="basicInfo.safeDutyIdcard" :disabled="isbasicinfo"></el-input>
                </el-form-item>
                <el-form-item label="消防安全管理人姓名" prop="safeManagerName" style="float: right;">
                  <el-input v-model.trim="basicInfo.safeManagerName" :disabled="isbasicinfo"></el-input>
                </el-form-item>
                <el-form-item label="消防安全管理人电话" prop="safeManagerPhone" style="float: left;">
                  <el-input v-model.trim="basicInfo.safeManagerPhone" :disabled="isbasicinfo"></el-input>
                </el-form-item>
                <el-form-item label="消防安全管理人身份证" prop="safeManagerIdcard" style="float: right;">
                  <el-input v-model.trim="basicInfo.safeManagerIdcard" :disabled="isbasicinfo"></el-input>
                </el-form-item>
                <el-form-item label style="width: 100%;float: right;" v-if="!isbasicinfo">
                  <el-button
                    type="primary"
                    @click="saveBasicInfo('basicForm');"
                    style="margin-top: 10px;"
                    size="mini"
                  >保存</el-button>
                  <el-button
                    style="margin-top: 10px;"
                    @click="isbasicinfo=true;getUnitInfo(curunitid);clearFormTips('basicForm')"
                    size="mini"
                    type="text"
                  >取消</el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </title-warp>
          <title-warp widthAuto :title="'地理信息'">
            <el-row class="nework-info-wrap" v-loading="isloadbaseinfo">
              <div class="basicinfo">
                <span class="buildtitle"></span>
                <span
                  class="buildedit"
                  onselectstart="return false;"
                  v-if="isareainfo"
                  v-show="basicInfo.oname!=''"
                  unselectable="on"
                  @click="isareainfo=!isareainfo"
                >
                  <i class="el-icon-edit"></i>编辑
                </span>
                <span
                  class="buildedit"
                  onselectstart="return false;"
                  v-else
                  unselectable="on"
                  @click="saveAreaInfo('areaForm')"
                >
                  <i class="el-icon-edit-outline"></i>保存
                </span>
              </div>
              <el-form
                :model="areaInfo"
                :rules="arearules"
                label-position="top"
                ref="areaForm"
                class="demo-basicForm"
              >
                <el-form-item label="详细地址" prop="addressDetail" style="float: left;">
                  <el-input v-model.trim="areaInfo.addressDetail" :disabled="isareainfo"></el-input>
                </el-form-item>
                <el-form-item label="路名" prop="road" style="float: right;">
                  <el-input v-model.trim="areaInfo.road" :disabled="isareainfo"></el-input>
                </el-form-item>
                <el-form-item label="行政区域编码" prop="xzqy" style="float: left;">
                  <el-input v-model.trim="areaInfo.xzqy" :disabled="isareainfo"></el-input>
                </el-form-item>
                <el-form-item label="街道编码" prop="street" style="float: right;">
                  <el-input v-model.trim="areaInfo.street" :disabled="isareainfo"></el-input>
                </el-form-item>
                <el-form-item label="门弄牌号" prop="mnph" style="float: left;">
                  <el-input v-model.trim="areaInfo.mnph" :disabled="isareainfo"></el-input>
                </el-form-item>
                <el-form-item label="楼栋幢" prop="ldz" style="float: right;">
                  <el-input v-model.trim="areaInfo.ldz" :disabled="isareainfo"></el-input>
                </el-form-item>
                <el-form-item label="经度/纬度" prop="gis">
                  <el-input v-model="areaInfo.gis==''?'未标记':'已标记'" :disabled="true">
                    <el-button
                      slot="append"
                      icon="el-icon-location"
                      @click="maptitle='编辑联网单位 - '+basicInfo.oname;innerVisible=true"
                      :disabled="isareainfo"
                    >标记地点</el-button>
                  </el-input>
                </el-form-item>
                <el-form-item label style="width: 100%;float: right;" v-if="!isareainfo">
                  <el-button
                    type="primary"
                    @click="saveAreaInfo('areaForm')"
                    style="margin-top: 10px;"
                    size="mini"
                  >保存</el-button>
                  <el-button
                    style="margin-top: 10px;"
                    @click="isareainfo=true;getUnitInfo(curunitid);clearFormTips('basicForm')"
                    size="mini"
                    type="text"
                  >取消</el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </title-warp>
          <title-warp widthAuto :title="'单位详情'">
            <el-row class="nework-info-wrap" v-loading="isloadbaseinfo">
              <div class="basicinfo">
                <span class="buildtitle"></span>
                <span
                  class="buildedit"
                  onselectstart="return false;"
                  v-if="isunitinfo"
                  v-show="basicInfo.oname!=''"
                  unselectable="on"
                  @click="isunitinfo=!isunitinfo"
                >
                  <i class="el-icon-edit"></i>编辑
                </span>
                <span
                  class="buildedit"
                  onselectstart="return false;"
                  v-else
                  unselectable="on"
                  @click="saveUnitInfo('unitForm')"
                >
                  <i class="el-icon-edit-outline"></i>保存
                </span>
              </div>
              <el-form
                :model="unitInfo"
                :rules="unitrules"
                label-position="top"
                ref="unitForm"
                class="demo-basicForm"
              >
                <el-form-item label="法人姓名" prop="legalName" style="float: left;">
                  <el-input v-model.trim="unitInfo.legalName" :disabled="isunitinfo"></el-input>
                </el-form-item>
                <el-form-item label="法人电话" prop="legalPhone" style="float: right;">
                  <el-input v-model.trim="unitInfo.legalPhone" :disabled="isunitinfo"></el-input>
                </el-form-item>
                <el-form-item label="法人身份证" prop="legalIdcard" style="float: left;">
                  <el-input v-model.trim="unitInfo.legalIdcard" :disabled="isunitinfo"></el-input>
                </el-form-item>
                <el-form-item label="单位注册时间" prop="oLicenseTimeLong" style="float: right;">
                  <el-date-picker
                    v-model="unitInfo.oLicenseTimeLong"
                    type="date"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="timestamp"
                    placeholder="选择日期"
                    style="width: 100%;"
                    :disabled="isunitinfo"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="单位联系人" prop="olinkman" style="float: left;">
                  <el-input v-model.trim="unitInfo.olinkman" :disabled="isunitinfo"></el-input>
                </el-form-item>
                <el-form-item label="单位联系电话" prop="olinkphone" style="float: right;">
                  <el-input v-model.trim="unitInfo.olinkphone" :disabled="isunitinfo"></el-input>
                </el-form-item>
                <el-form-item label="单位性质" prop="oNature" style="float: left;">
                  <el-select
                    v-model="unitInfo.oNature"
                    placeholder
                    style="width:100%;"
                    :disabled="isunitinfo"
                  >
                    <el-option label="国有企业" value="国有企业"></el-option>
                    <el-option label="集体企业" value="集体企业"></el-option>
                    <el-option label="民营企业" value="民营企业"></el-option>
                    <el-option label="个体工商户" value="个体工商户"></el-option>
                    <el-option label="中外合资企业" value="中外合资企业"></el-option>
                    <el-option label="外商独资企业" value="外商独资企业"></el-option>
                    <el-option label="股份制企业" value="股份制企业"></el-option>
                    <el-option label="事业单位" value="事业单位"></el-option>
                    <el-option label="国家机关" value="国家机关"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="单位类型" prop="oclass" style="float: right;">
                  <el-select
                    v-model="unitInfo.oclass"
                    placeholder
                    style="width:100%;"
                    :disabled="isunitinfo"
                  >
                    <el-option label="机关" value="机关"></el-option>
                    <el-option label="团体" value="团体"></el-option>
                    <el-option label="企业" value="企业"></el-option>
                    <el-option label="事业" value="事业"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="单位类别" prop="otype" style="float: left;">
                  <el-select
                    v-model="unitInfo.otype"
                    placeholder
                    style="width:100%;"
                    :disabled="isunitinfo"
                  >
                    <el-option label="重点单位" value="1"></el-option>
                    <el-option label="一般单位" value="2"></el-option>
                    <el-option label="九小场所" value="3"></el-option>
                    <el-option label="其他单位" value="4"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否为重点单位" prop="isKeyunit" style="float: right;">
                  <el-select
                    v-model="unitInfo.isKeyunit"
                    placeholder
                    style="width:100%;"
                    :disabled="isunitinfo"
                  >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="确定重点单位时间" prop="keyunitTimeLong" style="float: left;">
                  <el-date-picker
                    v-model="unitInfo.keyunitTimeLong"
                    type="date"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="timestamp"
                    placeholder="选择日期"
                    style="width: 100%;"
                    :disabled="isunitinfo"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="单位其他情况" prop="oother" style="float: left;width: 100%;">
                  <el-input type="textarea" v-model.trim="unitInfo.oother" :disabled="isunitinfo"></el-input>
                </el-form-item>
                <el-form-item label style="width: 100%;float: right;" v-if="!isunitinfo">
                  <el-button
                    type="primary"
                    @click="saveUnitInfo('unitForm')"
                    style="margin-top: 10px;"
                    size="mini"
                  >保存</el-button>
                  <el-button
                    style="margin-top: 10px;"
                    @click="isunitinfo=true;getUnitInfo(curunitid);clearFormTips('basicForm')"
                    size="mini"
                    type="text"
                  >取消</el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </title-warp>
          <title-warp widthAuto :title="'操作信息'">
            <el-row class="nework-info-wrap" v-loading="isloadbaseinfo">
              <div class="basicinfo">
                <span class="buildtitle"></span>
              </div>
              <el-form
                :model="handleForm"
                :rules="handlerules"
                label-position="top"
                ref="handleForm"
                class="demo-basicForm"
              >
                <el-form-item label="修改人" prop="changeacc" style="float: left;">
                  <el-input v-model.trim="handleForm.changeacc" :disabled="isedithandle"></el-input>
                </el-form-item>
                <el-form-item label="修改时间" prop="changetime" style="float: right;">
                  <el-input v-model.trim="handleForm.changetime" :disabled="isedithandle"></el-input>
                </el-form-item>
                <el-form-item label="创建人" prop="createacc" style="float: left;">
                  <el-input v-model.trim="handleForm.createacc" :disabled="isedithandle"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" prop="createtime" style="float: right;">
                  <el-input v-model.trim="handleForm.createtime" :disabled="isedithandle"></el-input>
                </el-form-item>
              </el-form>
            </el-row>
          </title-warp>
        </div>
      </el-container>
      <el-aside class="net-buildtrees" width="350px">
        <title-warp widthAuto :title="'全部联网单位'">
          <el-scrollbar style="height:80vh">
            <div class="unit-right-header">
              <p class="right-tree-title">
                <!-- <i class="el-icon-caret-right"></i>全部联网单位 -->
                <span
                  class="net-addbuild"
                  onselectstart="return false;"
                  unselectable="on"
                  @click="addUnit"
                >
                  <i class="el-icon-plus"></i>添加
                </span>
              </p>
              <el-input
                placeholder="请输入内容"
                class="input-with-select"
                v-model.trim="unitval"
                suffix-icon="el-icon-search"
                @keydown.enter.native="searchUnit"
                clearable
              ></el-input>
            </div>
            <ul class="unit-right-list" v-loading="isloadunit">
              <li
                :key="item.id"
                v-for="(item,index) in unitList"
                class="network-delete-list"
                :class="{unitrightactive:item.id==curunitid}"
                @click="getUnitInfo(item.id)"
                :title="item.oname"
              >
                {{item.oname|cutString}}
                <span
                  class="network-delete"
                  @click.stop="delunit(item.id,index)"
                >
                  <icon-svg icon-class="shanchu" style="fill:rgba(80, 227, 194, 0.7)" />
                </span>
              </li>
              <li v-show="unitList.length==0">暂无数据</li>
            </ul>
          </el-scrollbar>
        </title-warp>
      </el-aside>
      <addNetUnit :Show.sync="isaddnetunit" @addSuccess="addSuccess"></addNetUnit>
      <el-dialog
        title="删除联网单位"
        :visible.sync="dialogDeleteVisible"
        :show-close="false"
        custom-class="xf-jc-dialog"
        width="360px"
      >
        <div class="xf-jc-deletect">
          <p v-if="buildcount.length!==0">有{{buildcount.length}}个建筑绑定了此联网单位，无法删除。请将联网单位与建筑解绑后再进行删除</p>
          <p
            v-if="buildcount.length!==0"
            style="cursor: pointer;color: #2683f5;"
            @click="viewmoreunit"
          >
            查看建筑
            <i class="el-icon-d-arrow-right"></i>
          </p>
          <p v-else>无建筑绑定此联网单位，确定删除吗？</p>
        </div>
        <div slot="footer" class="dialog-footer" v-if="buildcount.length==0">
          <el-button type="danger" size="mini" @click="sureDelUnit()">删除</el-button>
          <el-button size="mini" type="text" @click="dialogDeleteVisible = false">取消</el-button>
        </div>
        <div slot="footer" class="dialog-footer" v-else>
          <el-button type="primary" size="mini" @click="dialogDeleteVisible = false">知道了</el-button>
        </div>
      </el-dialog>
      <viewChildBuild :Show.sync="childSitesShow" :siteIds.sync="childSiteids"></viewChildBuild>
      <mapMarker
        :Show.sync="innerVisible"
        @getMark="getMark"
        :gis="areaInfo.gis"
        :maptitle="maptitle"
      ></mapMarker>
    </el-container>
  </div>
</template>

<script>
import {
  getBuildAll, //获取所有建筑
  getUnitAll, //获取所有联网单位
  deleteSearch, //删除查询
  deleteUnit, //删除联网单位
  updateUnit, //更新联网单位信息
  getOneUnitInfo //获取单个联网单位信息
} from "@/api/admin/network/index";
import { mapGetters } from "vuex";
import addNetUnit from "./addnetunit";
import viewChildBuild from "@/components/ViewChildBuild";
import mapMarker from "@/components/mapMark";
import { IdentityCodeValid } from "@/utils/validate";
export default {
  name: "",
  components: { addNetUnit, viewChildBuild, mapMarker },
  data() {
    function isnumber(rule, value, callback) {
      let reg = /^\d+$/; //非负整数
      if (!reg.test(value) && value != "") {
        callback(new Error("请输入数字!"));
      } else {
        callback();
      }
    }
    function isphone(rule, value, callback) {
      let isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/; //手机号码
      let isMob = /^0?1[3|4|5|7|8][0-9]\d{8}$/; // 座机格式
      if (isMob.test(value) || isPhone.test(value)) {
        callback();
      } else if (value != "") {
        callback(new Error("电话格式不正确!"));
      } else {
        callback();
      }
    }
    function checkIdentity(rule, value, callback) {
      let result = IdentityCodeValid(value);
      //var reg = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
      if (!result.pass && value != "") {
        callback(new Error(result.tip));
      } else {
        callback();
      }
    }
    let self = this;
    return {
      showdelete: "",
      maptitle: "",
      unitList: [],
      curunitid: "", //当前联网单位id
      curdelunitid: "",
      unitval: "",
      childSitesShow: false,
      isloadunit: false,
      buildcount: [],
      childSiteids: "",
      basicInfo: {
        oname: "",
        olicense: "",
        ophone: "",
        oaddress: "",
        safeDutyName: "",
        safeDutyPhone: "",
        safeDutyIdcard: "",
        safeManagerName: "",
        safeManagerPhone: "",
        safeManagerIdcard: ""
      },
      areaInfo: {
        addressDetail: "",
        road: "",
        xzqy: "",
        street: "",
        mnph: "",
        ldz: "",
        gis: ""
      },
      unitInfo: {
        legalName: "",
        legalPhone: "",
        legalIdcard: "",
        oLicenseTimeLong: "",
        olinkman: "",
        olinkphone: "",
        oNature: "",
        oclass: "",
        otype: "",
        isKeyunit: "",
        keyunitTimeLong: "",
        oother: ""
      },
      handleForm: {
        changeacc: "",
        changetime: "",
        createacc: "",
        createtime: ""
      },
      isbasicinfo: true,
      isareainfo: true,
      isunitinfo: true,
      isedithandle: true,
      basicrules: {
        oname: [
          { required: true, message: "此项不能为空", trigger: "blur" },
          { max: 100, message: "长度在100个字符以内", trigger: "blur" }
        ],
        olicense: [
          { required: true, message: "此项不能为空", trigger: "blur" },
          { max: 100, message: "长度在100个字符以内", trigger: "blur" }
        ],
        ophone: [
          { required: true, message: "此项不能为空", trigger: "blur" },
          { validator: isphone, trigger: "blur" }
        ],
        oaddress: [
          { required: true, message: "此项不能为空", trigger: "blur" },
          { max: 200, message: "长度在200个字符以内", trigger: "blur" }
        ],
        safeDutyName: [
          { required: true, message: "此项不能为空", trigger: "blur" },
          { max: 50, message: "长度在50个字符以内", trigger: "blur" }
        ],
        safeDutyPhone: [
          { required: true, message: "此项不能为空", trigger: "blur" },
          { validator: isphone, trigger: "blur" }
        ],
        safeDutyIdcard: [
          { required: true, message: "此项不能为空", trigger: "blur" },
          { validator: checkIdentity, trigger: "blur" }
        ],
        safeManagerName: [
          { required: true, message: "此项不能为空", trigger: "blur" },
          { max: 50, message: "长度在50个字符以内", trigger: "blur" }
        ],
        safeManagerPhone: [
          { required: true, message: "此项不能为空", trigger: "blur" },
          { validator: isphone, trigger: "blur" }
        ],
        safeManagerIdcard: [
          { required: true, message: "此项不能为空", trigger: "blur" },
          { validator: checkIdentity, trigger: "blur" }
        ]
      },
      arearules: {
        addressDetail: [
          { max: 200, message: "长度在200个字符以内", trigger: "blur" }
        ],
        road: [{ max: 60, message: "长度在60个字符以内", trigger: "blur" }],
        xzqy: [
          { max: 6, message: "长度在6个字符以内", trigger: "blur" },
          { validator: isnumber, trigger: "blur" }
        ],
        street: [
          { max: 3, message: "长度在3个字符以内", trigger: "blur" },
          { validator: isnumber, trigger: "blur" }
        ],
        mnph: [{ max: 60, message: "长度在60个字符以内", trigger: "blur" }],
        ldz: [{ max: 20, message: "长度在20个字符以内", trigger: "blur" }],
        gis: [{ required: true, message: "此项不能为空", trigger: "blur" }]
      },
      unitrules: {
        legalName: [
          { max: 50, message: "长度在50个字符以内", trigger: "blur" }
        ],
        legalPhone: [{ validator: isphone, trigger: "blur" }],
        legalIdcard: [{ validator: checkIdentity, trigger: "blur" }],
        olicenseTime: [],
        olinkman: [{ max: 50, message: "长度在50个字符以内", trigger: "blur" }],
        olinkphone: [{ validator: isphone, trigger: "blur" }],
        oNature: [],
        oclass: [],
        otype: [],
        isKeyunit: [],
        keyunitTime: [],
        oother: [{ max: 200, message: "长度在200个字符以内", trigger: "blur" }]
      },
      handlerules: {},
      isloadbaseinfo: false,
      isaddnetunit: false,
      dialogDeleteVisible: false,
      innerVisible: false
    };
  },
  created() {
    this.getAllBuild();
  },
  filters: {
    cutString: function(value) {
      value = value.toString();
      if (value.length > 10) {
        return value.substring(0, 15) + "...";
      } else {
        return value;
      }
    }
  },
  computed: {},
  methods: {
    getAllBuild() {
      this.isloadunit = true;
      getUnitAll(this.unitval)
        .then(res => {
          if (res.length !== 0) {
            this.unitList = res;
            this.isloadunit = false;
            return this.unitList;
          } else {
            this.unitList = res;
            this.resetVal();
            this.isloadunit = false;
            return false;
          }
        })
        .then(res => {
          if (res) {
            this.getUnitInfo(res[0].id);
          }
        })
        .catch(() => {
          this.isloadunit = false;
        });
    },
    saveBasicInfo(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          let senobj = Object.assign({}, this.basicInfo, {
            id: parseInt(this.curunitid)
          });
          updateUnit(senobj).then(res => {
            this.$notify({
              title: "成功",
              message: "更新成功!",
              type: "success",
              duration: 2000
            });
            this.isbasicinfo = true;
            this.isloadunit = true;
            getUnitAll(this.unitval)
              .then(res => {
                this.unitList = res;
                this.isloadunit = false;
                return this.unitList;
              })
              .then(res => {
                this.getUnitInfo(this.curunitid);
              });
          });
        }
      });
    },
    saveAreaInfo(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          let senobj = Object.assign({}, this.areaInfo, {
            id: parseInt(this.curunitid)
          });
          updateUnit(senobj)
            .then(res => {
              this.$notify({
                title: "成功",
                message: "更新成功!",
                type: "success",
                duration: 2000
              });
              this.isareainfo = true;
            })
            .then(() => {
              this.getUnitInfo(this.curunitid);
            });
        }
      });
    },
    saveUnitInfo(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          let senobj = Object.assign({}, this.unitInfo, {
            id: parseInt(this.curunitid)
          });
          updateUnit(senobj)
            .then(res => {
              this.$notify({
                title: "成功",
                message: "更新成功!",
                type: "success",
                duration: 2000
              });
              this.isunitinfo = true;
            })
            .then(() => {
              this.getUnitInfo(this.curunitid);
            });
        }
      });
    },
    addUnit() {
      this.isaddnetunit = true;
    },
    delunit(id, index) {
      this.curdelunitid = id;
      deleteSearch(this.curdelunitid)
        .then(res => {
          this.buildcount = res.data;
        })
        .then(() => {
          this.dialogDeleteVisible = true;
        });
    },
    sureDelUnit() {
      deleteUnit(this.curdelunitid).then(res => {
        this.$notify({
          title: "成功",
          message: "删除成功!",
          type: "success",
          duration: 2000
        });
        this.getAllBuild();
        this.dialogDeleteVisible = false;
      });
    },
    viewmoreunit() {
      this.childSitesShow = true;
      this.childSiteids = this.buildcount.toString();
    },
    handledata(data) {
      this.resetVal();
      for (let item in data) {
        if (this.basicInfo.hasOwnProperty(item)) {
          this.basicInfo[item] = data[item];
        } else if (this.areaInfo.hasOwnProperty(item)) {
          this.areaInfo[item] = data[item];
        } else if (this.unitInfo.hasOwnProperty(item)) {
          this.unitInfo[item] = data[item];
        } else if (this.handleForm.hasOwnProperty(item)) {
          this.handleForm[item] = data[item];
        }
      }
    },
    resetVal() {
      for (let item in this.basicInfo) {
        this.basicInfo[item] = "";
      }
      for (let item in this.areaInfo) {
        this.areaInfo[item] = "";
      }
      for (let item in this.unitInfo) {
        this.unitInfo[item] = "";
      }
      for (let item in this.handleForm) {
        this.handleForm[item] = "";
      }
    },
    getUnitInfo(id) {
      this.curunitid = id;
      this.isloadbaseinfo = true;
      getOneUnitInfo(this.curunitid)
        .then(res => {
          this.handledata(res.data);
          this.isloadbaseinfo = false;
        })
        .catch(() => {
          this.isloadbaseinfo = false;
        });
    },
    searchUnit() {
      this.getAllBuild();
    },
    getMark(val) {
      this.areaInfo.gis = val;
      this.innerVisible = false;
    },
    addSuccess(val) {
      if (!val) {
        this.isaddnetunit = false;
        this.getAllBuild();
      }
    },
    clearFormTips(fromname) {
      this.$refs[fromname].clearValidate();
    }
  },
  mounted() {}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.network-delete {
  visibility: hidden;
}
.network-delete-list {
  &:hover {
    .network-delete {
      visibility: visible;
    }
  }
}
.unit-all-container {
  padding: 0 0 50px 20px;
  display: flex;
  justify-content: space-between;
}
.buildtitle {
  font-size: 24px;
}
.buildedit {
  font-size: 14px;
  user-select: none;
  cursor: pointer;
}
.demo-basicForm {
  margin-top: 24px;
}
@media screen and (max-width: 1440px) {
  .nework-info-wrap {
    width: 94%;
  }
}
@media screen and (min-width: 1441px) {
  .nework-info-wrap {
    width: 68%;
  }
}
.nework-info-wrap {
  .el-form-item__label {
    padding: 0;
    color: rgba(255, 255, 255, 0.7);
  }
  .el-form-item {
    margin-bottom: 12px;
    width: 48.9%;
  }
}
.net-buildtrees {
  height: 90vh;
  // background: linear-gradient(-140deg, transparent 2em, #0a1722 0);
  position: relative;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  // &:before {
  //   content: "";
  //   position: absolute;
  //   top: 0;
  //   bottom: 0;
  //   left: 0;
  //   right: 0;
  //   border: 2px solid #2bdef5;
  //   clip-path: polygon(0 0, 30px 0, 30px 100%, 0 100%);
  // }
}
.unit-right-header {
  padding: 10px 0 0;
}
.net-buildtrees .el-scrollbar__wrap {
  overflow-x: hidden;
}
.net-addbuild {
  float: right;
  margin-bottom: 5px;
  cursor: pointer;
  color: #2bdef5;
  font-size: 16px;
  user-select: none;
  margin-right: 20px;
}
.unit-right-list {
  list-style: none;
  margin-top: 17px;
  padding: 0;
  min-height: 100px;
}
.unit-right-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 22px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 14px;
  &.unitrightactive {
    background: rgba(0, 0, 0, 0.3);
    color: #2bdef5;
  }
}
.dialog-header {
  padding: 16px 10px 26px;
  display: flex;
  justify-content: space-between;
}
.marktitle {
  font-size: 24px;
}
.mapwrap {
  width: 100%;
  height: 740px;
}
.innerdialog .el-dialog__body {
  padding: 0;
}
.innerdialog {
  border-radius: 10px;
}
.search-box {
  position: absolute !important;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
}
.unit-all-container .el-input__inner {
  color: rgba(255, 255, 255, 0.7) !important;
}
.unit-all-container .el-textarea.is-disabled .el-textarea__inner {
  color: rgba(255, 255, 255, 0.7) !important;
}

.abstatic-height_title {
  width: 90px;
  height: 30px;
  background: none;
  background: url("../../../assets/layout/CombinedShape2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-flex;
  color: #07eeb8;
  justify-content: center;
  align-items: center;
}
</style>
